<template>
	<view class="box">
		<uNavbar title="道具列表" bgColor="#262241"></uNavbar>
		<view class="tab-nav">
			<view class="tab-list-item" v-for="(item,index) in toggleList" :key="item.id"
				@click="clickToggleHandle(item,index)">
				<view :class="{ active: item.select}" class="text">{{ item.label }}</view>
			</view>
		</view>
		<view class="wrap">
			<view class="wrapitem" v-for="item in proplist" :key="item.id">
				<view class="tit">
					{{item.prop_name}}X{{item.ful_number}}
				</view>
				<view class="time" v-if="item.prop_type==3">
					{{item.create_time}}
				</view>
				<view class="time" v-if="item.prop_type==2&&item.is_term">
					有效期限：{{item.start_time}}至{{item.end_time}}
				</view>
				<view class="time" v-if="item.prop_type==2&&!item.is_term">
					长期有效
				</view>
				<view class="btn" v-if="item.status==0&&item.prop_type==3"  @click="submit(item.id)">
					使用
				</view>
				<view class="btn" style="opacity: 0.5;" v-if="item.status==2&&item.prop_type==3">
					已使用
				</view>
			</view>
		</view>
		<noDatas  :xxxList="proplist" :status="status"></noDatas>
	</view>

</template>

<script>
	import {propList,propApply} from "../../api/object.js"
	export default {
		data() {
			return {
				toggleList: [{
						label: '未使用',
						selnum:0,
						select: true
					}, {
						label: '已使用',
						selnum:2,
						select: false
					}

				],
				selval: "未使用",
				page: 1,
				size: 20,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				proplist:[],
				selnum:0
			}
		},
		onLoad(options) {
			this.id=options.id
			this.getlist()
		},
		methods: {
			submit(ids){
				propApply({
					id:ids
				}).then(res=>{
					if(res.code==1){
						this.page=1
						this.getlist()
					}
					uni.$u.toast(res.msg)
				})
			},
			getlist(){
				propList({
					prop_id:this.id,
					status:this.selnum,
					page:this.page
				}).then(res=>{
					if (res.code == 1) {
						let list = res.data.data;
						this.proplist = this.page == 1 ? list : this.proplist.concat(list);
						console.log(this.proplist);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}
				})
			},
			clickToggleHandle(ele, index) {
				this.toggleList.forEach(item => item.select = false)	
				ele.select = true	
				this.selval = ele.label
				this.selnum=ele.selnum
				this.page=1
				this.getlist()
				console.log(this.selval)
			},
		},
		onReachBottom() {
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.getlist()
			}

		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 750rpx;
		height: 100vh;
		background-color: #262241;
		position: relative;
	}

	.tab-nav {
		width: 750rpx;
		height: 100rpx;
		background-color: #262241;
		// margin-left: 20rpx;
		display: flex;
		align-items: center;
		position: fixed;
		z-index: 999;
		.tab-list-item {
			position: relative;
			width: 350rpx;
			.text {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 50rpx;
				padding: 20rpx;
				height: 52rpx;
				opacity: 1;
				font-weight: 400;
				text-align: center;
				font-size: 32rpx;
				color: #A6A5AF;
			}
			.active {
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
.wrap{
	width: 750rpx;
	margin-top: 100rpx;
	.wrapitem{
		width: 690rpx;
		margin: 0 auto;
		height: 150rpx;
		background: #3C2F65;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		position: relative;
		margin-bottom: 30rpx;
		.tit{
			position: absolute;
			top: 28rpx;
			left: 24rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			width: 500rpx;
			 white-space: nowrap; /* 防止文本换行 */
			    overflow: hidden; /* 隐藏溢出内容 */
			    text-overflow: ellipsis; /* 显示省略号 */
		}
		.time{
			position: absolute;
			left: 24rpx;
			bottom: 28rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #A6A5AF;
		}
		.btn{
			width: 124rpx;
			height: 52rpx;
			background: linear-gradient( 274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
			border-radius: 232rpx 232rpx 232rpx 232rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 52rpx;
			position: absolute;
			right: 24rpx;
			bottom: 50rpx;
		}
	}
}

</style>